<script setup>
import avatar from "/src/assets/avatar.jpg";
import { defineProps } from 'vue';
import { useRouter } from 'vue-router';  // 导入 useRouter

// 父组件传递的数据：用户名和头像
const props = defineProps({
    user: { type: Object, required: true }  // 接收 user 属性
});

// 获取 router 实例
const router = useRouter();

// 点击头像时的处理逻辑
const avatarClick = () => {
  console.log(props.user.UserID); 
  router.push(`/UserPage?id=${props.user.UserID}`);
};
</script>

<template>
  <el-card style="width: 80%; height: auto; border-radius: 20px; margin-top:10px; margin-left: 10%;">
    <el-row gutter="40">
      <!-- 头像 -->
      <el-avatar @click="avatarClick" span="6" :src="props.user.ProfilePhoto || avatar" :size="40" style="margin-left: 10px;" />
      <el-col span="18" style="margin-top: 0;">
        <div style="margin-top: 6px;">{{ props.user.UName }}</div>
      </el-col>
    </el-row>
  </el-card>
</template>

<style scoped>
.el-avatar {
  cursor: pointer;
}
</style>
